<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="林镭特">
    <title></title>
    <style>
        .edit img{
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
    </style>
</head>
<body>


<main>

</main>

<script type="text/html" id="edit">
    <div class="edit">
        <img src="{{user.avatar}}" alt="">
        <input type="file" name="myfile" id="myfile" accept="image/*" hidden ><br>
        <form >
        <span class="username">{{user.username}}</span><br>
       <label>修改密码</label> <input type="text" name="password" >
        </form>
        <button id="send" >保存修改</button>
    </div>
</script>

<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
    <script src="./template-web.js"></script>
    <script src="./layer/layer.js"></script>
<script>
    
    $.get('/editshow',(data)=>{
          if(data.error==0){
              console.log(data);
             var htmlstr = template("edit", data);
          $("main").html(htmlstr);
          }
        })
    // 文件选择框
        $("main").on("click", ".edit img", function (ev) {
            $(this).next().click();
      });


       // 图片的展示
    var file = null;
    $("main").on("change", ".edit #myfile", function (ev) {
        console.log(this.files);
        file = this.files[0];
        $(this).prev().attr('src', URL.createObjectURL(file));
      });


   
 // 图片上传
 $("main").on("click", ".edit #send", function (ev) {
    if (!file) {
            alert('请选择图片');
            return;
        }
        var send = new FormData();
        send.append('myfile', file);
        $.ajax({
            url: '/upload',
            data: send,
            method: 'POST',
            processData : false, 
            contentType : false, 
            success(data){
                console.log(data.data);
                location.href = 'index.html';

            }
        });
      });

      //密码的修改
      $("main").on("click", ".edit #send", function (ev) {
          var param = $('form').serialize();
            $.post('/edit',param,(data)=>{
                
            })
      
      });





  

</script>
</body>
</html>